<template >

   <div class="signinpanel">
     <div class="row" style="border-top:0.0625rem solid #FFFFFF ;">
         <div class="col-md-7">
            <div class="signin-info" style="float: left;">
                  <div class="logopanel m-b">
                        <h2>{{h2Title}} </h2>
                  </div>
                  <div class="m-b"></div>
                        <h5 style="font-size: 1.0625rem;">欢迎使用 <strong>{{h2Title}}</strong></h5>
                  </div>
         </div>

         <div class="col-md-5">
            <div class="m-t text-center" style="background: rgba(109, 109, 109, 0.23);border: 0px solid #3ee15e; border-radius:0.3125rem ; margin-top:1.25rem; padding: 0.625rem 0rem 1.25rem; width: inherit;">
                 <p style="padding: 5px 20px 0px 9px; font-size: larger;">电商CRM管理平台</p>
                           <div class="form-group has-feedback">
                               <div>
                                    <p v-show="hintpl" class="hintpl">{{hintMessage}}</p>
                               </div>
                               <input v-model="username"  placeholder="账号" style="width: 200px;" autofocus/>
                           </div>
                           <div class="form-group has-feedback">
                               <input type="password" v-model="password"  style="width: 200px;"
                                        placeholder="密码"/>
                           </div>
                           <div class="form-group has-feedback">
                               <div style="display: inline-block;width: 100px;">
                                   <input v-model="captcha"
                                            placeholder="验证码"/>
                               </div>
                               <div style="display: inline-block;width: 100px;">
                                   <img style="height: 32px;width: 96px;border-radius: 4px;"  title="点击刷新"
                                        class="pointer" :src="captchaimg" @click="refreshCode">
                               </div>
                           </div>
                           <div>
                              <!-- <button type="primary" @click="logins" style="width: 200px;">登录</button> -->
                               <el-button type="primary" style="height: 38px;width: 203px;"  @click="logins" >登录</el-button>
                           </div>
              </div>
         </div>
       </div>
       <div class="signup-footer">
              <div style="float: left;font-size: smaller;">
                  2018~2020 &nbsp; <a href="http://www.baidu.com/" target="_blank">桐老厮工作室</a> 版权所有
              </div>
        </div>
   </div>
</template>

<script>
export default{

    data(){
     return {
            h2Title:'桐老厮作品'
            ,hintpl:false
            ,hintMessage:'账号不能为空'
            ,captchaimg : "img/captcha"
            ,username : ""
            ,password : ""
            ,captcha : ""
            }
    },methods:{
        logins  () {
            console.log(this.username)
            var username = this.username;
            var password = this.password;
            var captcha = this.captcha;
            if(username == null || username == '' || username == undefined){
                   this.hintMessage = "账号不能为空"
                   this.hintpl = true;
                   return;
            }
            if(password == null || password == '' || password == undefined){
                  this.hintMessage = "密码不能为空"
                   this.hintpl = true;
                   return;
            }
            var param ={
              "username" : username,
              "password" : password,
              "captcha"  : captcha
            }
            this.ais.sendPost("/sys/login",null,{ params :param, headers :{'Content-Type' :'application/x-www-form-urlencoded'}}).then(msg => {
              console.log(msg.data)
              var result = msg.data;
              if(result.code == 200){
                //跳页面
                this.$router.push("/home")
                return;
              }
              this.hintMessage = result.message
              this.hintpl = true;

            }).catch(err => {
              console.log(err)
            });
        },
        refreshCode:function(){
          console.log(this.ais.getPrefixUrl())
          this.captchaimg  = this.ais.getPrefixUrl() + "/captcha.jpg?t="+new Date();
        }
    }

    ,created(){
      this.refreshCode();


    }

}
</script>

<style>
.hintpl{
margin-left: -115px;
color: red;
font-size: small;
margin-bottom: auto;
}
  button:hover{
    background: #57a3f3;
    border-color: #57a3f3;
  }
  button{

  }
  .form-group input:hover{
    border-color: #57a3f3;
  }
  .form-group input{
    display: inline-block;
    width: 100%;
    height: 2rem;
    line-height: 1.5;
    padding: 4px 7px;
    font-size: 12px;
    border: 1px solid #dddee1;
    border-radius: 4px;
    color: #495060;
    background-color: #fff;
    background-image: none;
    position: relative;
    cursor: text;
    transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;

  }
  body{
    height: auto;
    background: url(../img/login.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .signinpanel {
      color: white;
      width: 850px;
      margin: 15% auto 0 auto;
  }
  .signinpanel .logopanel {
      float: none;
      width: auto;
      padding: 0;
      background: none;
  }

.signinpanel .signin-info ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.signinpanel .form-control {
    display: block;
    margin-top: 15px;
}

.signinpanel .uname {
    background: #fff  no-repeat 95% center;color:#333;
}

.signinpanel .pword {
    background: #fff  no-repeat 95% center;color:#333;
}

.signinpanel .btn {
    margin-top: 15px;
}

.signinpanel form {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255,255,255,.3);
    -moz-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
    -webkit-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
    box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 30px;
}
h5{
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h2{
  font-size: 2rem;
  margin: 0.625rem auto 0.8125rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
.signup-footer{border-top: solid 1px rgba(255,255,255,.3);margin:20px 0;padding-top: 15px;}

/* @media screen and (max-width: 768px) {
    .signinpanel,
    .signuppanel {
        margin: 0 auto;
        width: 420px!important;
        padding: 20px;
    }
    .signinpanel form {
        margin-top: 20px;
    }
    .signup-footer {
        margin-bottom: 10px;
    }
    .signuppanel .form-control {
        margin-bottom: 10px;
    }
    .signup-footer .pull-left,
    .signup-footer .pull-right {
        float: none !important;
        text-align: center;
    }
    .signinpanel .signin-info ul {
        display: none;
    }
} */
/* @media screen and (max-width: 320px) {
    .signinpanel,
    .signuppanel {
        margin:0 20px;
        width:auto;
    } */
</style>
